// import {delCamera} from '@/api/videoSurveillance'
import {CCard} from '@/components/card'
import EditCameraModal from '@/components/modal/editCameraModal'
import {CnMediumSpan} from '@/components/text'
import ezuikitJS from 'ezuikit-js'
import {PropType} from 'vue'
import './cameraAction.less'

const VedioPlay = defineComponent({
  props: {
    id: {
      type: String,
      required: true
    },

    option: {
      type: Object as PropType<Camera.Info>,
      required: true
    }
  },
  emits: {
    success: (): boolean => true,
    error: (): boolean => true
  },
  setup(props, {emit}) {
    const play = ref<ezuikitJS.EZUIKitPlayer | undefined>(undefined)
    const openEditCameraModal = ref<() => void>(() => {})
    watch(
      () => props.option,
      (n, o) => {
        // if (n.cameraUrl !== o.cameraUrl) {
        //   initVideo()
        // }
      }
    )

    // async function initVideo() {
    //   if (play.value !== undefined) {
    //     play.value?.stop()
    //     play.value = undefined
    //     initVideo()
    //     return
    //   }

    //   const player1 = new ezuikitJS.EZUIKitPlayer({
    //     id: props.id,
    //     accessToken: props.option.accessToken,
    //     url: props.option.cameraUrl,
    //     audio: 0,
    //     template: 'security',
    //     width: 960,
    //     height: 620
    //   })
    //   play.value = player1
    // }

    onMounted(() => {
      // const doms = document.querySelectorAll(`#${props.id}`)
      // if (doms.length === 1) {
      //   initVideo()
      // } else {
      //   console.error(
      //     `监控容器id名有重复，已取消id名为${props.id}的${doms.length}个监控画面显示，请排查！`
      //   )
      // }
    })

    onUnmounted(() => {
      // play.value?.stop()
    })

    return () => [
      <div class='camera_action_box'>
        <a-button type='primary' class='font-medium' onClick={openEditCameraModal.value}>
          修改名称
        </a-button>

        <EditCameraModal
          option={props.option}
          onLoad={open => {
            openEditCameraModal.value = open
          }}
          onSuccess={() => {
            emit('success')
          }}
          onError={() => {
            emit('error')
          }}
        ></EditCameraModal>
      </div>
    ]
  }
})

export default VedioPlay
